<template>
	<div class="login-box">
	    <el-form class="login-form">
		   <h2 style="text-align: center;color: red; font-size: 30px;">药店进销存管理系统</h2>
	      <el-form-item style="margin-top: 20px;">
	        <el-input placeholder="请输入账号" v-model="userNo"></el-input>
	      </el-form-item>
	      <el-form-item>
	        <el-input placeholder="请输入密码" v-model="passWord" type="password"></el-input>
	      </el-form-item>
	      <el-form-item>
	        <el-button style="width: 100%;" type="primary" @click="login">登录</el-button>
	      </el-form-item>
	    </el-form>
	  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { userAuthStore } from '../store/authStore'
var useAuth = userAuthStore();
export default{
	data(){
		return{			
			userNo: "",
			passWord: ""	 
		}
	},
	methods:{
		//登录
		async login() {
			if (this.userNo === "") {
				ElMessage({ message: '登录账号不能为空', type: 'warning' });
				return;
			} else if (this.passWord === "") {
				ElMessage({ message: '密码不能为空', type: 'warning' });
				return;
			}
			var params = { "userNo": this.userNo, "passWord": this.passWord };	
			await useAuth.login(params);
			//跳转到主页面
			this.$router.push("/index");
		}
		
	}
}

</script>

<style>
.login-form{
  width: 400px;
  background-color: #fff;
  padding: 15px;
  height: 300px;
  border-radius: 20px;
  position: absolute;
  margin-top: -125px;
  margin-left: 320px;
  top:50%;
  left:50%;
}
.login-box{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
  background-image: url(../assets/image/login.jpg);
  background-repeat: no-repeat;/*图片不重复布满*/
  background-size: cover;/*图片布满容器*/
}

</style>